<div class="container" phx-hook="TopicPage" cm-title="主题列表">
  <section class="section">
    <div class="columns is-desktop">
        <div class="column is-9-desktop">
          <div class="card">
            <div class="card-content">
              <div class="tabs is-small" style="overflow-x: visible; overflow-y: visible">
                <ul>
                  <li>
                    <div class="dropdown is-hoverable cm-node-selector">
                      <div class="dropdown-trigger">
                        <button class="button is-size-7" aria-haspopup="true" aria-controls="dropdown-menu">
                          <span><%= @view_module.activated_name(@nodes, @node_id) %></span>
                          <span class="icon is-small">
                            <i class="fas fa-angle-down" aria-hidden="true"></i>
                          </span>
                        </button>
                      </div>
                      <div class="dropdown-menu" id="dropdown-menu" role="menu">
                        <div class="dropdown-content">
                          <%= unless @node_id == 0 do %>
                            <%= live_link "全部话题", 
                                  to: Routes.live_path(@socket, CommunityWeb.TopicsLive, 
                                  %{node_id: 0, category_id: @category_id}),
                                  class: "dropdown-item" %>
                          <% end %>
                          <%= for node <- @nodes do %>
                            <% is_active? = @node_id == node.id %>
                            <%= live_link node.name, 
                                to: Routes.live_path(@socket, CommunityWeb.TopicsLive, %{node_id: node.id, category_id: @category_id}),
                                class: if is_active?, do: "dropdown-item is-active", else: "dropdown-item" %>
                          <% end %>
                        </div>
                      </div>
                    </div>
                  </li>
                  <%= for topic <- @topics do %>
                    <%= if topic[:id] == @category_id do %>
                      <li class="is-active">
                    <% else %>
                      <li>
                    <% end %>
                      <%= live_link topic[:name], 
                            to: Routes.live_path(@socket, CommunityWeb.TopicsLive, %{category_id: topic[:id], node_id: @node_id}) %>
                    </li>
                  <% end %>
                </ul>
              </div>
              <%= Phoenix.LiveView.live_render @socket,
                    CommunityWeb.ArticlesLive, 
                    session: %{page: 1, gsize: 1, category_id: @category_id, node_id: @node_id},
                    id: "topic_articles" %>
            </div>
          </div>
        </div>
        <div class="column is-3-desktop">
          <div class="card">
            <header class="card-header">
              <p class="card-header-title">最新公告</p>
            </header>
            <div class="card-content">
              我是一条公告～
            </div>
          </div>
        </div>
    </div>
  </section>
</div>
<script type="text/javascript">
var dropdown = document.querySelector('.dropdown');
dropdown.addEventListener('hover', function(event) {
  event.stopPropagation();
  dropdown.classList.toggle('is-active');
});
</script>
